<template>
  <div class="tab-index">
    <div class="title">
        <img src="@/assets/imgs/ai-title.png" alt="">
        <div class="title-text">随时召唤你的伴学导师、私教专家！</div>
    </div>
    <div class="center-content">
      <div class="item">
        <!-- <span class="iconfont icon-yumaobi"></span>
        <h2>示例</h2> -->
        <div class="content-text">
          <li class="pointer rounded-md" 
          v-for="(item, index) in questionArrays" 
          :key="item.id" 
          @click="handleEgClick(item.id, index)">
          <div class="item-left">
            <div class="itemTitle">{{ item.title }}</div>
            <div class="itemText">{{ item.text }}</div>
          </div>
          <div class="item-right">
            <img class="itemPic" :src="item.imgSrc" alt="">
          </div>
        </li>
        </div>
      </div>
      <!-- <div class="item">
        <span class="iconfont icon-bangongguanli2"></span>
        <h2>功能</h2>
        <div class="content-text">
          <li class="rounded-md">ChatGPT可以回答问题、帮助您学习、编写代码、一起进行头脑风暴等</li>
          <li class="rounded-md">连续对话，云端存储对话信息</li>
          <li class="rounded-md">系统添加预设对话、自定义对话，更灵活</li>
        </div>
      </div> -->
      <!-- <div class="item">
        <span class="iconfont icon-chat-bolt"></span>
        <h2>注意</h2>
        <div class="content-text">
          <li class="rounded-md">GPT无法替代人类的思想，它的回答请注意分辨</li>
          <li class="rounded-md">连续对话中GPT没有回答完全，输入"继续"可补充完接下来的对话</li>
          <li class="rounded-md">GPT3.5 知识库受限于2021年以前的知识</li>
        </div>
      </div> -->
    </div>
    <div class="bottom">
      <div class="pointer" @click="handleStart">
        <span>开始体验</span>
        <span class="iconfont icon-telegram-01"></span>
      </div>
    </div>
  </div>
</template>

<script>
  import {getToken} from "@/utils/auth";

  // const questionArrays = [
  //   "帮我制定一个3天的旅游计划",
  //   "我想要减肥，对此你有什么很好的建议？",
  //   "第一次拜访女朋友的父母应该送什么礼物?"
  // ]
  export default {
    name: "HomeComponentsChat",
    data(){
      return{
        questionArrays: [
          {
            id: 1,
            title:'图像工程-发布版',
            text: '图像工程调试发布版，针对图像工程学科做了整体模型优化 1、增加图像工程知识库 2、增加系统工程、公式、链表绘图工具 3、增加chain对抗大模型输出的不确定性。4、增加代码格式化输出数据。',
            imgSrc: require('@/assets/imgs/pic1.png')
          },
          {
            id: 2,
            title:'图像工程-未调试',
            text: '图像工程未调试版本，仅使用基础模型，未做任何调试。',
            imgSrc: require('@/assets/imgs/pic2.png')
          },
          {
            id: 3,
            title:'图像工程-知识库',
            text: '图像工程知识库版本，将三本《图像工程》书籍作为大模型的输出的参考标准。形成公有数据+私有数据的混合输出体系。',
            imgSrc: require('@/assets/imgs/pic3.png')
          },
          {
            id: 4,
            title:'图像工程-答案调试版',
            text: '图像工程知识库版本，将三本《图像工程》书籍及部分问题答案作为大模型的输出的参考标准。查看问题的命中率、准确度。',
            imgSrc: require('@/assets/imgs/pic4.png')
          },
        ],
        isLogin: !!getToken(),
        botList: [],
      }
    },
    created() {
      // this.getBotList()
    },
    methods:{
      // 获取首页bot列表
      getBotList() {
        this.$api.get('/module/bot/list').then(res => {
          this.botList = res.data
        })
      },
      handleEgClick(id, index){
        this.$api.get('/module/bot/list').then(res => {
          this.botList = res.data
          id = this.botList[index].botId
          this.$router.push({name: 'sessionChat', query: {botId: id}})
        })
      },
      handleStart(){
        if (!this.isLogin){
          this.$message.info('登陆后体验更佳，快来加入吧')
          this.$store.commit('SET_AUTH_DIALOG',true)
          this.$store.commit('SET_LOGIN_DIALOG',true)
          return
        }
        this.$router.push({name: 'sessionChat'})
      }
    }
  }
</script>

<style scoped lang="scss">
  .tab-index{
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-content: center;
    color: var(--font-color-default);
  }

  .title{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 100px auto 0;
    padding: 20px;
    width: 311px;
    height: 55px;
    img {
      width: 100%;
      object-fit: cover;
    }
    .title-text {
      margin-top: 25px;
    }
  }

  .center-content{
    width: 1200px;
    margin: 50px auto;
    height: auto;
  }
  .center-content .item{
    .content-text {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      li {
        display: flex;
        justify-content: space-between;
        width: 400px;
        height: 120px;
        .item-left {
          margin-right: 30px;
          .itemTitle {
          font-family: Microsoft YaHei;
          font-size: 18px;
          color: #2D2D33;
          margin-bottom: 12px;
          }
          .itemText {
            font-size: 12px;
            color: #85848C;
          }
        }
        img {
          display: inline-block;
          vertical-align: middle;
          width: 70px;
          height: 70px;
          border-radius: 5px;
        }
      }
    }
  }
  .center-content .item .iconfont{
    font-size: 35px;
  }
  .center-content .item h2{
    padding: 12px;
  }
  .center-content .item li{
    min-height: 70px;
    height: auto;
    background: var(--aside-background);
    margin: 8px 6px;
    padding: 15px;
    font-size: 14px;
    letter-spacing: 1px;
    word-spacing: 1px;
  }
  .center-content .item li:hover {
    box-shadow: 1px 1px 20px 10px var(--aside-hover-color);
  }


  .bottom{
    width: 100%;
    height: 150px;
    position: absolute;
    box-sizing: border-box;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .bottom>div{
    position: relative;
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease-out;
  }
  .bottom>div:hover{
    transform: scale(1.1);
    transition: all 0.3s ease-in-out;
  }
  .bottom span{
    display: block;
    color: var(--font-color-default);
    font-size: 25px;
    letter-spacing: 2px;
    word-spacing: 2px;

  }
</style>
